<#--
  Matrix Framework Keycloak Login Theme
  企业级业务管理平台登录页面模板
-->
<!DOCTYPE html>
<html class="${properties.kcCssClass!}">
<head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="robots" content="noindex, nofollow">

    <#if properties.meta?has_content>
        <#list properties.meta?split(' ') as meta>
            <meta name="${meta?split('==')[0]}" content="${meta?split('==')[1]}">
        </#list>
    </#if>

    <title>${msg("loginTitle",(realm.displayName!'Matrix Framework'))}</title>

    <!-- Favicon -->
    <link rel="icon" href="${url.resourcesPath}/img/favicon.ico" />

    <!-- Matrix Framework Theme CSS -->
    <link href="${url.resourcesCommonPath}/node_modules/@patternfly/patternfly/patternfly.min.css" rel="stylesheet" />
    <link href="${url.resourcesCommonPath}/node_modules/patternfly/dist/css/patternfly-additions.min.css" rel="stylesheet" />
    <link href="${url.resourcesPath}/css/matrix-login.css" rel="stylesheet" />
    <link href="${url.resourcesPath}/css/matrix-components.css" rel="stylesheet" />

    <!-- Font Awesome Icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">

    <!-- Responsive viewport -->
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Matrix Framework Custom JavaScript -->
    <script type="module" src="${url.resourcesPath}/js/matrix-login.js"></script>
    <script type="module" src="${url.resourcesPath}/js/matrix-utils.js"></script>

    <!-- Theme Configuration -->
    <script>
        window.MatrixTheme = {
            realm: '${realm.name}',
            displayName: '${(realm.displayName!'Matrix Framework')?js_string}',
            tenantId: '${(realm.attributes.tenant_id!'')?js_string}',
            features: {
                socialLogin: ${(realm.attributes.social_login!'false')?js_string},
                multiFactor: ${(realm.attributes.mfa_enabled!'false')?js_string},
                rememberMe: ${(realm.attributes.remember_me_enabled!'true')?js_string}
            }
        };
    </script>
</head>
<body class="matrix-login-body">
    <div class="matrix-login-container">
        <!-- 左侧品牌区域 -->
        <div class="matrix-brand-section">
            <div class="matrix-brand-content">
                <!-- Logo区域 -->
                <div class="matrix-logo">
                    <img src="${url.resourcesPath}/img/matrix-logo.png" alt="Matrix Framework Logo" />
                    <h1 class="matrix-title">${(realm.displayName!'Matrix Framework')?html}</h1>
                </div>

                <!-- 标语描述 -->
                <p class="matrix-subtitle">企业级业务管理平台</p>

                <!-- 特性展示 -->
                <div class="matrix-features">
                    <div class="matrix-feature">
                        <div class="feature-icon">
                            <i class="fas fa-shield-alt"></i>
                        </div>
                        <div class="feature-text">
                            <h4>企业级安全</h4>
                            <p>基于Keycloak的统一身份认证</p>
                        </div>
                    </div>

                    <div class="matrix-feature">
                        <div class="feature-icon">
                            <i class="fas fa-users"></i>
                        </div>
                        <div class="feature-text">
                            <h4>多租户支持</h4>
                            <p>隔离的企业数据管理</p>
                        </div>
                    </div>

                    <div class="matrix-feature">
                        <div class="feature-icon">
                            <i class="fas fa-cogs"></i>
                        </div>
                        <div class="feature-text">
                            <h4>统一认证</h4>
                            <p>单点登录和权限管理</p>
                        </div>
                    </div>
                </div>

                <!-- 版权信息 -->
                <div class="matrix-footer">
                    <p>&copy; 2024 Matrix Framework. All rights reserved.</p>
                </div>
            </div>
        </div>

        <!-- 右侧登录区域 -->
        <div class="matrix-login-section">
            <div class="matrix-login-card">
                <!-- 租户信息显示 -->
                <div class="matrix-tenant-info">
                    <div class="tenant-badge">
                        <i class="fas fa-building"></i>
                        <span class="tenant-name">${(realm.displayName!'默认租户')?html}</span>
                    </div>
                </div>

                <!-- 错误/成功消息区域 -->
                <#if message?has_content>
                    <div class="matrix-alert matrix-alert-${message.type}">
                        <div class="alert-icon">
                            <#if message.type = 'success'>
                                <i class="fas fa-check-circle"></i>
                            <#elseif message.type = 'warning'>
                                <i class="fas fa-exclamation-triangle"></i>
                            <#elseif message.type = 'error'>
                                <i class="fas fa-exclamation-circle"></i>
                            <#else>
                                <i class="fas fa-info-circle"></i>
                            </#if>
                        </div>
                        <div class="alert-content">
                            ${message.summary?no_esc}
                        </div>
                    </div>
                </#if>

                <!-- 主要内容区域 -->
                <#nested "content">

                <!-- 底部链接 -->
                <div class="matrix-login-footer">
                    <#if realm.registrationEnabled && !usernameEditDisabled??>
                        <div class="register-link">
                            <span>还没有账号？</span>
                            <a href="${url.registrationUrl}">立即注册</a>
                        </div>
                    </#if>

                    <#if realm.resetPasswordAllowed>
                        <div class="forgot-password">
                            <a href="${url.loginResetCredentialsUrl}">忘记密码？</a>
                        </div>
                    </#if>
                </div>
            </div>

            <!-- 语言切换 -->
            <div class="matrix-language-selector">
                <div class="language-dropdown">
                    <button class="language-toggle" onclick="toggleLanguageMenu()">
                        <i class="fas fa-globe"></i>
                        <span id="currentLanguage">中文</span>
                        <i class="fas fa-chevron-down"></i>
                    </button>
                    <div class="language-menu" id="languageMenu">
                        <a href="#" onclick="changeLanguage('zh')">中文</a>
                        <a href="#" onclick="changeLanguage('en')">English</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 背景装饰元素 -->
    <div class="matrix-background-decoration">
        <div class="decoration-circle decoration-1"></div>
        <div class="decoration-circle decoration-2"></div>
        <div class="decoration-circle decoration-3"></div>
    </div>

    <!-- 加载指示器 -->
    <div class="matrix-loading-overlay" id="loadingOverlay" style="display: none;">
        <div class="loading-spinner">
            <div class="spinner-ring"></div>
            <p>正在登录...</p>
        </div>
    </div>
</body>
</html>